/**
 * Created by zhulizhe on 2017/8/16.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    StyleSheet,
    SectionList,
    Dimensions,
    Animated,
    Easing,
    Platform
} from 'react-native';
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import Constant from "../Contant";
import Ionicons from 'react-native-vector-icons/Ionicons';
import Modal from 'react-native-modalbox';
import {Bg} from './Home'

import {GradientButton} from '../component/Button'
import RequestUtil from "../util/NetUtil";
import {GradientRadiusButton, GradienCircle} from '../component/Button'
import waterShopStore from '../store/WaterShopStore'
import addressMgrStore from '../store/AddrMgrStore'
import Parabolic from 'react-native-parabolic'
import WaterTiketModelModal from '../component/WaterTiketModelModal'
import HeaderBar from '../component/HeaderBar'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import {PriceLabel} from './ShoppingCart'
import ProductJudge from './ProductJudge'
import Placeholder from 'rn-placeholder';
import LoadingView from "../component/LoadingView";

const cellHeight = 60;

const {width, height} = Dimensions.get('window')

// 头部店铺信息组件
const ShopHeader = observer(({shop, goBack}) => {
    // alert(JSON.stringify(shop))
    return <View style={{
        backgroundColor: '#00000000',
        paddingTop: 20
    }}>
        <HeaderBar
            rightButton={()=>{
                return ( <View>
                    <Image source={require('../../asserts/shop/share-white.png')}/>
                </View>)
            }}
            leftClick={goBack}
        />
        <View style={{
            paddingHorizontal: 10,
            flexDirection: 'row',
            width: '100%',
            marginTop: 15,
        }}>
            <View style={{flex: 2}}>
                <View style={{
                    width: '90%',
                    height: 80,
                    shadowColor: Constant.TEXT_COLOR_2,
                    shadowOffset: {h: 2, w: 1},
                    shadowOpacity: 0.5,
                    justifyContent:'center',
                    alignItems:'center'
                }}>
                    <Image
                        style={{
                            width: 70,
                            height: 70,
                            alignSelf: 'center',
                        }}
                        source={{uri: shop.imageUrl}}/>
                </View>
            </View>
            <View style={{flex: 7, paddingLeft: 5, paddingVertical: 10}}>
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center'
                }}>
                    <Text style={{
                        color: '#fff',
                        fontSize: 16,
                        paddingRight: 15
                    }}>{shop && shop.name}</Text>
                    <Ionicons name="ios-arrow-forward-outline" size={24} color="#fff"/>
                </View>
                <View style={{flexDirection: 'row', width: '100%', justifyContent: 'space-between'}}>
                    <Text style={{color: '#fff', fontSize: 12}}>{shop && shop.address}</Text>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={{color: '#fff', fontSize: 12, paddingLeft: 15}}>{shop && shop.distance}m</Text>
                        <Text style={{fontWeight: '100', color: '#fff'}}>|</Text>
                        <Text style={{color: '#fff', fontSize: 12}}>{shop && shop.deliveryTime}分钟</Text>
                    </View>
                </View>
            </View>
        </View>
        <View style={[{
            height: 30,
            paddingLeft: 20
        }]}>
            <Text style={{fontSize: 12}}>喜腾山泉品牌水票在本平台所有水站通用</Text>
        </View>
    </View>
})

// 已选商品 弹出层
export const PopOut = observer(({selectedItemList = [], isOpen = false, clearShoppingCart}) => {

    const PCell = ({product}) => {
        return <View style={[{
            padding: 10,
            justifyContent: 'space-between',
            backgroundColor: '#fff',
            flexDirection: 'row',
            alignItems: 'center',
            flex: 1
        }, styles.borderBottom]}>
            <View style={{flex: 5}}>
                <Text>
                    {product.name}
                </Text>
                <Text style={{color: Constant.REDCOLOR}}>
                    ¥ {product.activeProductItem.currentPrice}
                </Text>
            </View>
            <View style={{flex: 2}}>
                <Option product={product}/>
            </View>
        </View>
    }

    return <Modal
        swipeToClose={false}
        backdropPressToClose={true}
        isOpen={isOpen}
        style={[styles.modal]}
        position={"bottom"}>
        <View style={[{
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
            padding: 10
        }, styles.borderBottom]}>
            <View>
                <Text style={{color: 'gray'}}>已选择</Text>
            </View>
            <TouchableOpacity
                onPress={clearShoppingCart}
            >
                <Text style={{color: 'gray'}}>清空</Text>
            </TouchableOpacity>
        </View>
        <ScrollView style={{marginBottom: 46}}>
            {
                selectedItemList.map((p, index) => {
                    return <PCell
                        key={index}
                        product={p}/>
                })
            }
        </ScrollView>
    </Modal>
})

// 全局shopId
let shopId = 0;

// 桶装水 加入购物车 +1 or 减少购物车 -1
export const updateItemCount = (tagItem, product, type = 'increase') => {
    LOG('product 加入购物车:' + JSON.stringify(product));
    // 桶装水类型 pItemModels length为1
    let productItemId = 0;
    if (product.type == 'entityProduct') {
        let pItemM = product.pItemModels[0];
        productItemId = pItemM.productItemId;
    }
    else {
        productItemId = product.activeProductItem.productItemId;
    }
    RequestUtil.requestData('shop/shoppingcart/' + type, {
        "productItemId": productItemId,
        "productType": product.type,
        "shopId": shopId,
    }).then(resp => {
        LOG('increaseOrdecrease:' + JSON.stringify(resp));
        let {totalCount, totalPrice, productItemActionModel} = resp;
        let {tagItemModelList = [], resultMount} = productItemActionModel;
        //更新标签和总数
        waterShopStore.updateTagList(totalPrice, totalCount, tagItemModelList)
        //更新商品
        waterShopStore.updateProduct(product, resultMount);
        waterShopStore.requestSelctedProductList(shopId);
    })
}

// 加减操作组件
const Option = observer(({tagItem, product, shoppingCartAnimate}) => {

    let selectedCount = product.selectCount;
    let pItemModels = product.pItemModels;
    let productItem = product;
    if (pItemModels && pItemModels.length) {
        let item = pItemModels[0];
        selectedCount = item.selectCount;
        productItem = item;
    }
    LOG('selectedCount#', selectedCount);
    let Minus = <TouchableOpacity
        onPress={() => {
            updateItemCount(tagItem, product, 'decrease');
        }}
        style={[styles.option, styles.center]}
        activeOpacity={0.9}>
        <Image source={require('../../asserts/shop/minus.png')}/>
    </TouchableOpacity>

    if (selectedCount == 0) {
        Minus = null;
    }
    return <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
        {Minus}
        <Text style={{
            paddingHorizontal: 5,
            width: 40,
            fontSize: 16,
            textAlign: 'center'
        }}>{selectedCount != 0 ? selectedCount : ''}</Text>
        <TouchableOpacity
            onPress={() => {
                updateItemCount(tagItem, product, 'increase');
                // 执行加入购物车动画
                if (Platform.OS == 'ios')
                    if (shoppingCartAnimate) {
                        shoppingCartAnimate();
                    }
            }}
            style={[styles.option, styles.center]}
            activeOpacity={0.9}>
            <Image source={require('../../asserts/shop/plus.png')}/>
        </TouchableOpacity>
    </View>
})

// 桶装水cell组件
@observer
class WaterCell extends Component {

    render() {
        let {product, onClick, tagItem} = this.props;
        let pInfo = product.pItemModels[0];
        let productItemId = pInfo.productItemId;

        return <TouchableOpacity
            activeOpacity={0.9}
            style={[{
                flexDirection: 'row',
                paddingLeft: 5,
                paddingRight: 10,
                paddingVertical: 15
            },
                styles.borderBottom
            ]}>
            <View style={{flex: 1,flexDirection:'row'}}>
                <Image
                    defaultSource={require('../../asserts/common/default_productItem.png')}
                    resizeMode='contain'
                    source={{uri: product.imageUrl}}
                    style={{
                        width: width * 0.8 * 0.3 - 10,
                        height: width * 0.8 * 0.3 - 10,
                        borderWidth:StyleSheet.hairlineWidth,
                        borderColor:Constant.GRAYBGCOLOR
                    }}/>
                <TouchableOpacity
                    activeOpacity={0.9}
                    onPress={() => {
                        onClick(productItemId)
                    }}>
                    <View
                        style={{flex: 2, justifyContent: 'space-between'}}>
                        <Text>{product.name}</Text>
                        <Text>已售{pInfo.saleMount}</Text>
                        <PriceLabel price={pInfo.currentPrice}/>
                    </View>
                </TouchableOpacity>
            </View>
            <View
                style={{
                    justifyContent: 'flex-end',
                    width: width * 0.8 * 0.3,
                }}>
                <View
                    ref={productItemId}
                    style={{height: 30}}>
                    <Option
                        // 执行加入购物车动画
                        shoppingCartAnimate={() => {
                            setTimeout(() => {
                                this.refs[productItemId].measure((a, b, w, h, left, top) => {
                                    let fixL = width * 0.75 - left + width * 0.25 * 0.5;
                                    this.props.addItem({
                                        x: left,
                                        y: top,
                                        data: product,
                                        pos: [left, top, -fixL, height - 40]
                                    })
                                })
                            })
                        }}
                        tagItem={tagItem}
                        product={product}/>
                </View>
            </View>
        </TouchableOpacity>
    }
}

// 水票组件
const Ticket = ({product, onClick, policyClick}) => {
    return <TouchableOpacity
        activeOpacity={1}
        onPress={onClick}
        style={{
            flexDirection: 'row',
            padding: 10,
            flex: 1,
            height: 80,
            backgroundColor: 'white',
            alignItems:'center'}}>
        <View style={{
            flex: 3,
            justifyContent: 'space-between',
            flexDirection:'row',
            alignItems:'center'
        }}>
            <Image
                source={require('../../asserts/ticket/dianpu_shuipiao_bg_blue_left1.png')}/>
            <Image
                resizeMode='stretch'
                style={{
                    flexDirection: 'row',
                    width: '100%',
                    alignItems:'center'
                }}
                source={require('../../asserts/ticket/dianpu_shuipiao_bg_left2.png')}>
                <Image source={{uri: product.imageUrl}} style={{width: 50, height: 50, marginLeft: 10}}></Image>
                <View style={{marginLeft: 10}}>
                    <Text style={{fontSize: 13}} numberOfLines={1}>{product.name}</Text>
                    <Text style={{fontSize: 12, marginTop: 3}}>天然饮用水18L</Text>
                </View>
            </Image>
        </View>
        <Image
            resizeMode='contain'
            style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                marginLeft:2,
                backgroundColor:'#00000000'
            }}
               source={require('../../asserts/ticket/dianpu_shuipiao_bg_right.png')}>
            <GradientRadiusButton
                title="选套餐"
                textStyle={{fontSize: 12, color: 'white'}}
                style={{
                    borderRadius: 15,
                    paddingHorizontal: 7,
                    paddingVertical: 3
                }}
                colors={['#ff680f', '#ff2d2d']}
                onPress={() => {
                    waterShopStore.setSelectedItem(product);
                    policyClick();
                }}
            />
        </Image>
    </TouchableOpacity>
}

const SecHeader = ({section}) => {
    return <View style={{
        paddingHorizontal: 10,
        paddingVertical: 10,
        backgroundColor: '#fff',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: Constant.SEPLINECOLOR,
        justifyContent: 'center'
    }}>
        <Text>{section.name}</Text>
    </View>
}

const VIEWABILITY_CONFIG = {
    minimumViewTime: 3000,
    viewAreaCoveragePercentThreshold: 100,
    waitForInteraction: true,
};

// 商品
class ProductContainer extends Component {

    // 滚动到指定 的位置
    scrollToLocation = (sectionIndex, itemIndex) => {
        if(Platform.OS=='ios'){
            this.scrollView.scrollToLocation({
                sectionIndex: sectionIndex,
                itemIndex: itemIndex
            })
        }else {
        }
    }

    // 右侧商品列表
    renderItem = (tagItemList) => {
        let {policyClick} = this.props;
        return tagItemList.map((tagItem, index) => {
            return ({
                key: index,
                name: tagItem.name,
                data: tagItem.productList,
                renderItem: ({item}) => {
                    if (item.type == 'entityProduct') {
                        return <WaterCell
                            addItem={this.props.addItem}
                            onClick={() => {
                                this.props.navigate('ProductDetails', {tagItem: tagItem, product: item, shopId: shopId})
                            }}
                            tagItem={tagItem}
                            product={item}/>
                    }
                    return <Ticket
                        onClick={() => {
                            this.props.navigate('TicketDetails', {tagItem: tagItem, product: item, shopId: shopId})
                        }}
                        product={item}
                        policyClick={policyClick}
                    />
                }
            })
        })
    }

    // 左侧 标签列表
    renderTags = (tagItemList) => {
        return tagItemList.map((tagItem, index) => {
            return <CateCell
                onClick={() => {
                    this.scrollToLocation(index, 0);
                    this.props.onTagSelected(index);
                }}
                key={index}
                tagItem={tagItem}
                selected={this.props.selectedTag == index}/>
        })
    }

    // 加入购物车动画
    addItem(obj) {
        this.props.onAdd(obj)
        LOG('addItem', JSON.stringify(obj));
    }

    extraUniqueKey(item, index) {
        return "index" + index + item;
    }

    render() {
        return <View style={{flexDirection: 'row', flex: 1}}>
            <ScrollView style={{
                flex: 1,
                backgroundColor: Constant.GRAYBGCOLOR
            }}>
                {
                    this.renderTags(this.props.tagItemList)
                }
            </ScrollView>
            <View style={{
                flex: 4,
                backgroundColor: '#fff'
            }}>
                <View style={{flex: 1}}>
                    <SectionList
                        onViewableItemsChanged={(info)=>{
                            LOG('SectionList',JSON.stringify(info.changed));
                        }}
                        stickySectionHeadersEnabled={Platform.OS=='ios'?true:false}
                        ref={(scrollView) => this.scrollView = scrollView}
                        keyExtractor={this.extraUniqueKey.bind(this)}
                        renderSectionHeader={({section}) => <SecHeader section={section}/>}
                        viewabilityConfig={VIEWABILITY_CONFIG}
                        sections={this.renderItem(this.props.tagItemList)}/>
                </View>
            </View>
        </View>
    }
}


// 商品 评论导航
const NavTab = ({titles = [], activeIndex = 0, onChange}) => {
    const currentIndex = observable(activeIndex);
    // LOG('activeIndex2',activeIndex)
    const Com = observer(() => <View
        style={[{
            height: 30,
            flexDirection: 'row'
        },
            styles.borderBottom
        ]}>
        {titles.map((tab, index) => {
            let active = currentIndex == index;
            return <TouchableOpacity
                key={index}
                onPress={() => {
                    onChange(index);
                    currentIndex.set(index);
                }}
                style={{
                    paddingVertical: 5,
                    paddingHorizontal: 10
                }}>
                <Text style={{
                    fontSize: Constant.FONT_SIZE_32,
                    color: active ? Constant.BLUECOLOR : Constant.TEXT_COLOR_3,
                    paddingBottom: 5
                }}>{tab}</Text>
                <View style={{
                    backgroundColor: active ? Constant.BLUECOLOR : '#fff',
                    height: 2,
                }}/>
            </TouchableOpacity>
        })}
    </View>)
    return <Com/>
}

// 商品和评论容器
@observer
class Content extends Component {

    @observable activeIndex = 0;
    @observable selectedIndex = 0;

    constructor(props) {
        super(props)
        this.navigate = this.props.navigate;
    }

    render() {
        return <View style={{flex: 1}}>
            <ScrollableTabView
                initialPage={this.activeIndex}
                onChangeTab={obj => {
                    this.activeIndex = obj.i;
                }}
                renderTabBar={() => <NavTab
                    onChange={index => {
                        this.activeIndex = index;
                    }}
                    activeIndex={this.activeIndex}
                    titles={['商品', '评价']}/>}>
                <ProductContainer
                    addItem={(obj) => {
                        this.props.addItem(obj);
                    }}
                    onTagSelected={(index) => {
                        this.selectedIndex = index;
                    }}
                    selectedTag={this.selectedIndex}
                    tagItemList={waterShopStore.tagItems}
                    navigate={this.navigate}
                    policyClick={this.props.policyClick}
                />
                <ProductJudge/>
            </ScrollableTabView>
        </View>
    }
}
export class FooterCart extends Component{
    render(){
        let {toggleShoppingCart}=this.props;
        return <TouchableOpacity
            onPress={toggleShoppingCart}
            activeOpacity={1}
            style={{
                width: 46,
                height: 46,
                borderRadius: 23,
                backgroundColor: Constant.TEXT_COLOR_3,
                marginLeft: 15,
                bottom: 10,
                alignItems: 'center',
                justifyContent: 'center',
                borderWidth: 4,
                borderColor: Constant.TEXT_COLOR_2,
                zIndex: 9999,
                position: 'absolute',
            }}>
            <Ionicons name="ios-cart-outline" size={24} color='#fff'/>
            <View style={{
                position: 'absolute',
                right: -3,
                top: -3,
                width: 20,
                height: 20,
                alignItems: 'center',
                justifyContent: 'center',
                opacity:waterShopStore.totalCount?1:0
            }}>
                <GradienCircle title={waterShopStore.totalCount} r={20}/>
            </View>
        </TouchableOpacity>
    }
}
// 底部购物车组件
export const Footer = observer(({scale, totalPrice, conformOrder}) => {
    return <View style={[{
        flexDirection: 'row',
        height: 46,
        alignItems: 'flex-end',
        zIndex: 1000,
        backgroundColor: 'white',
    }, styles.borderTop]}>

        <View style={{
            flexDirection: 'row',
            alignItems: 'center',
            flex: 2,
            height: 46,
            backgroundColor: Constant.TEXT_COLOR_3
        }}>

            <View style={{
                zIndex: -1,
                paddingHorizontal: 10,
                color: '#fff',
                marginLeft:60
            }}>
                <PriceLabel color='#fff' price={totalPrice}/>
            </View>
        </View>
        <View style={{flex: 1,height:46}}>
            <GradientButton
                round={false}
                title="去结算"
                colors={['#ff680f', '#ff2d2d']}
                onPress={conformOrder}/>
        </View>
    </View>
})

// 分类cell
const CateCell = observer(({selected, tagItem, onClick}) => {
    let indicatorColor = selected ? Constant.BLUECOLOR : Constant.GRAYBGCOLOR;
    let bgColor = selected ? '#fff' : Constant.GRAYBGCOLOR;
    let textColor = selected ? Constant.BLUECOLOR : Constant.TEXT_COLOR_3;

    let TotalCom = <View style={[{
        position: 'absolute',
        right: 4,
        top: 4,
        width: 16,
        height: 16,
    },
        styles.center]}>
        <GradienCircle title={tagItem.selectCount} r={18}/>
    </View>
    if (tagItem.selectCount == 0) {
        TotalCom = null;
    }

    return <TouchableOpacity
        activeOpacity={0.9}
        onPress={onClick}
        style={[{
            flexDirection: 'row',
            backgroundColor: bgColor,
            height: cellHeight * .7,
            alignItems: 'center'
        }, styles.borderBottom]}>
        <View style={{
            width: 2,
            backgroundColor: indicatorColor,
            height: cellHeight * .5
        }}/>

        <View style={[{flex: 1}, styles.center]}>
            <Text style={{
                color: textColor,
                fontSize: 13
            }}>{tagItem.name}</Text>
        </View>
        {TotalCom}
    </TouchableOpacity>
})

@observer
export default class WaterShop extends Component {

    // 当前选择的分类索引
    @observable selectedIndex = 0;

    // 打开/关闭 购物车
    @observable showShoppingCart = false;

    @observable shopInfo = {
        imageUrl: ''
    };

    @observable addBtnY = -9999;

    @observable shoppingcartScale = new Animated.Value(0);

    static navigationOptions = {
        header: null
    }

    // 获取店铺信息
    getShopInfo() {
        let shop = this.props.navigation.state.params.shop;
        let activeAddress = addressMgrStore.activeAddress;
        LOG('activeAddress' + JSON.stringify(activeAddress));

        RequestUtil.requestData('shopinfo', {
            shopId: shop.shopId,
            cityName: activeAddress.cityName,
            latitude: activeAddress.latitude,
            longtitude: activeAddress.longitude
        }).then((shopInfo) => {
            this.shopInfo = shopInfo;
            LOG('shopInfo#' + JSON.stringify(shopInfo));
        })
    }

    // 获取店铺商品列表
    getProductList() {
        let shop = this.props.navigation.state.params.shop;
        shopId = shop.shopId;
        RequestUtil.requestData('shop/shoppingcart/productList', {
            shopId: shopId
        }).then((productListM) => {
            LOG('店铺商品----------' + JSON.stringify(productListM));
            waterShopStore.createProductItems(productListM);
            this.selectedProductList();

        });
    }

    componentWillMount() {
        this.getShopInfo();
        this.getProductList();
    }

    // 购物车中的商品列表
    selectedProductList() {
        let shop = this.props.navigation.state.params.shop;
        waterShopStore.requestSelctedProductList(shop.shopId);
    }

    parabolicEnd(data) {
        this.addBtnY = -9999;
        this.scaleAnimate();
    }

    // 购物车缩放动画
    scaleAnimate() {
        this.shoppingcartScale.setValue(0)
        Animated.timing(this.shoppingcartScale, {
            toValue: 1.4,
            duration: 700,
            easing: Easing.elastic(3)
        }).start()
    }

    open() {
        this.refs.waterTiketModelModal._open();
    }

    render() {
        return <View style={[styles.flex]}>
            <View style={{
                flex: 1,
                backgroundColor: '#fff'
            }}>
                <Bg/>
                <ShopHeader
                    shop={this.shopInfo}
                    goBack={() => {
                        this.props.navigation.goBack();
                    }}/>
                <Content
                    addItem={(data) => {
                        LOG('addItem', JSON.stringify(data));
                        let {pos} = data
                        this.addBtnY = data.y;
                        this.refs["parabolic"].run(pos, data)
                    }}
                    policyClick={this.open.bind(this)}
                    navigate={this.props.navigation.navigate}/>
            </View>
            <PopOut
                clearShoppingCart={() => {
                    //清空购物车
                    waterShopStore.clearShoppingCart(shopId);
                    this.showShoppingCart = false;
                }}
                selectedItemList={waterShopStore.selectedItemList}
                isOpen={this.showShoppingCart}/>
            <Footer
                scale={this.shoppingcartScale}
                totalPrice={waterShopStore.totalPrice}
                conformOrder={() => {
                    this.showShoppingCart = false;
                    setTimeout(() => {
                        this.props.navigation.navigate('ConfirmOrder', {shopId: shopId});
                    }, 500)
                }}/>
            <FooterCart toggleShoppingCart={() => {
                this.showShoppingCart = !this.showShoppingCart;
            }}/>
            <WaterTiketModelModal
                ref={'waterTiketModelModal'}
                product={waterShopStore.getSelectedItem}
                callback={this.updateItemCount}/>
            <Parabolic
                ref={"parabolic"}
                style={[styles.tmpBtn, {top: this.addBtnY}]}
                renderChildren={() => {
                    return (
                        <View style={{
                            width: 14,
                            height: 14,
                            backgroundColor: "#3190e8",
                            borderRadius: 7,
                            overflow: "hidden"
                        }}></View>
                    )
                }}
                animateEnd={this.parabolicEnd.bind(this)}
                curvature={0.003}
                duration={1000}
            />
            <Placeholder.ImageContent
                size={60}
                animate="fade"
                lineNumber={4}
                lineSpacing={5}
                lastLineWidth="30%"
                onReady={!this.loading}
            >
            </Placeholder.ImageContent>
            <LoadingView
                visible={this.loading}
                color="white"
                indicatorSize="small"
                messageFontSize={12}
                message=''
            />
        </View>
    }
}

const styles = {
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    flex: {
        flex: 1
    },
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
    borderTop: {
        borderTopColor: Constant.SEPLINECOLOR,
        borderTopWidth: 1
    },
    option: {
        // width: 28,
        // height: 28,
        // borderRadius: 14,
    },
    modal: {
        height: 280,
        backgroundColor: '#fff'
    },
    tmpBtn: {
        backgroundColor: "transparent",
        position: "absolute",
        right: 4,
        width: 40,
        height: 40,
        alignItems: "center",
        justifyContent: "center"
    }
}